<template>
  <div class="monitor-render">
    <opera-list
      :hide-opera="true"
      :monitorList="monitorList"
      :activeId="activeId"></opera-list>
    <!-- 基础信息 项目信息 展示 -->
    <base-info ref="baseInfo"
               @getInfo="getEquipInfo"
    ></base-info>
    <!-- table列表和echart -->
    <div class="monitor_page">
      <!-- table -->
      <el-card class="page-left" :class="{toggle: isToggleStatus}" shadow="hover">
        <div class="monitor_page-filter">
          <el-date-picker
            v-show="!isToggleStatus"
            style="width:100%;min-width:240px"
            size="small"
            value-format="timestamp"
            v-model="timerArray"
            type="daterange"
            :picker-options="pickerOptions"
            :clearable="false"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>

        </div>
        <div class="monitor_page-filter flex-between" :class="{setMarginTop: isToggleStatus}">
          <div class="monitor_page-filter-left">
            <button class="toggle_wrap" @click="toggleStatus">
              <i class="el-icon-s-fold" :class="{rotate: isToggleStatus}"></i>
            </button>
          </div>
          <el-button
            size="small"
            type="primary"
            class="common_btn-defalut"
            icon="el-icon-search"
            @click="querySynthesisRecord()">搜索
          </el-button>
        </div>

        <el-scrollbar v-show="!isToggleStatus" class="common_scrollbar complex_scroll">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item :title="item.monitorTypeName" :name="item.monitorTypeName" v-for="item in conditionList"
                              :key="item.id">
              <el-checkbox-group v-model="pointList" style="width: 100%">
                <ul style="display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap">
                  <li style="width: 100%;margin-bottom: 0.5vw" v-for="child in item.itemList || []" :key="child.id">
                    <el-checkbox size="mini" style="width:100%" :style="item.monitorTypeName=='深部位移'?'height: 2.5vw':''"
                                 :label="child.id" border>
                      {{child.name}}

                      <el-select v-model="child.depth" v-if="item.monitorTypeName=='深部位移'"
                                 style="width: 60%;height: 2vw;margin-left: 20%" clearable placeholder="请选择">
                        <el-option v-for="item in child.queryItemList" :key="item" :label="item" :value="item">
                        </el-option>
                      </el-select>

                    </el-checkbox>
                  </li>
                </ul>
              </el-checkbox-group>
            </el-collapse-item>
          </el-collapse>
        </el-scrollbar>
      </el-card>

      <!-- 绘图部分 -->
      <div class="monitor_page-right">
        <el-card class="card_echarts" shadow="hover">
          <echarts-complex ref="echartsChange"></echarts-complex>
        </el-card>

      </div>

    </div>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>

<script>
  import {getLocalStorageItem} from "@/utils/storage-helper";
  import {searchSynthesisRecord, getConditionList} from '@/services/model/project-info'
  import {store, actions} from '../work-point.store'
  import BaseInfo from './modules/base-info'
  import OperaList from './modules/opera-list'
  import EchartsComplex from './monitor-echarts/base/complex-echart'
  import XLoading from '@/components/animation/x-loading.vue'
  import {equipInfoQuery} from '@/services/model/sensor'
  import {
    getMonitorInfo,
  } from '@/services/model/project-info'

  export default {
    components: {BaseInfo, OperaList, XLoading, EchartsComplex},
    data() {
      return {
        getConditionList: [],
        activeName: '',
        depth: [],
        pointList: [],
        // 当前的图表钩子
        chartsName: ['echartsChange'],
        // 当前激活的菜单id，通过？参数的形式加载连接上，没有默认第一个
        activeId: null,
        // 列表查询参数
        searchParams: {},
        workPointName: '',
        // 接口正在加载
        isLoading: false,
        // 是否折叠
        isToggleStatus: false,
        // 时间选择器配置
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }],
          onPick: obj => {
            this.picerMinDate = new Date(obj.minDate).getTime()
          },
          disabledDate: time => {
            if (this.picerMinDate) {
              // 最多可选3个月
              const LIMIT = 90 * 24 * 60 * 60 * 1000
              const maxTime = this.picerMinDate + LIMIT
              const minTime = this.picerMinDate - LIMIT
              return time.getTime() > maxTime || time.getTime() < minTime
            }
          }
        },
        activeCondition: {},
        activeEnvironment1: {},
        activeEnvironment2: {},
      }
    },
    watch: {
      monitorList() {
      }
    },
    computed: {
      // // 当前所有的监测点列表
      monitorList() {
        // 当前的用户类型
        const {workPointId} = this.$route.params
        const monitorList = store.workPoint_MonitorList.find(x => x.id === workPointId)?.children || []
        return monitorList
      },
      // // 状态监测数据 栏
      conditionList() {
        // 倾角仪、拉线位移、拉线拉力、深部位移
        const mapList = [1, 3, 4, 8, 9]
        let list = []
        mapList.map(x => {
          let item = this.getConditionList.find(w => w.monitorType === x)
          item && list.push(item)
        })
        return list
      },

      // 时间筛选
      timerArray: {
        get() {
          return [this.searchParams.startCreateTime, this.searchParams.endCreateTime]
        },
        set([startTimer, endTimer]) {
          this.searchParams.startCreateTime = startTimer
          this.searchParams.endCreateTime = endTimer
        }
      },
    },
    methods: {

      // 查询工点既监测点信息
      async queryWorkPoint() {
        // // 初始化参数
        let initParams = {}
        let res = await actions.queryWorkPointList(this.$route.params.projectId, 4, '综合绘图')
        this.monitorInfo = res
        this.$refs.baseInfo.infoHandel(res, '综合绘图')

      },
      async getEquipInfo() {
        if (!this.monitorInfo.bindEquipId) {
          this.$message.info('暂无设备信息！')
          return
        }
        let res = await equipInfoQuery({equipId: this.monitorInfo.bindEquipId})

        this.equipInfo = res.data ? res.data : {}
        this.isShowDialog = true
      },
      async getConditionLists() {
        let res = await getConditionList({id: this.$route.params.workPointId})
        this.getConditionList = res.data || []
      },
      async querySynthesisRecord() {
        this.isLoading = true

        let pointList = []
        this.conditionList.map(x => {
          x.itemList.map(y => {
            this.pointList.map(z => {
              if (z == y.id) {
                if (x.monitorType == 1) {
                  pointList.push([y.id, y.depth])
                }
                else {
                  pointList.push([y.id, null])
                }
              }
            })
          })

        })

        this.searchParams = {...this.searchParams, pointList: pointList}
        let res = await searchSynthesisRecord(this.searchParams)
        this.isLoading = false;
        if (res.data.length === 0 || res.data[0].dataList == null) {
          this.$notify({
            type: 'error',
            title: '提示',
            message: '当前时间段没有数据'
          })
        } else {
          this.$refs.echartsChange.updateEchart(res.data, this.workPointName)
        }
      },
      // 折叠面板
      toggleStatus() {
        this.isToggleStatus = !this.isToggleStatus
        setTimeout(() => {
          this.chartsName.map(name => {
            this.$refs[name].echartResize()
          })
        }, 301)
      },
    },
    mounted() {
      // 当前的用户类型
      const {activeId} = this.$route.query
      this.activeId = activeId
      // 默认30天数据
      const timer = 30 * 24 * 3600 * 1000
      var timestamp = new Date().getTime()
      let endTime = timestamp + 1000
      let startTime = timestamp - timer
      this.searchParams = {
        endCreateTime: endTime,
        startCreateTime: startTime,
        // 结束时间加1s
      }
      this.getConditionLists()

    }, activated() {
      this.queryWorkPoint({first: true})
    }
  }
</script>

<style lang="less" scoped>
  .monitor-render-wrap {
    position: relative;
  }

  @import url('./monitor-item/commom.less');

  .card_echarts {
    height: 680px;
  }

  .page-left {
    flex-shrink: 0;
    width: 360px;

    &.toggle {
      width: 55px;
    }

    /deep/ .el-card__body {
      width: 100%;
      height: 100%;
    }
  }

  .menu_title {
    width: 100%;
    padding: 10px 24px;
    background-color: #1990FE;
    color: #ffffff;
    font-size: 16px;
  }

  /deep/ .complex_menu {
    .el-menu-item, .el-submenu__title {
      height: 40px;
      line-height: 40px;
    }

    .el-menu-item.is-active {
      background-color: #e9f3fe;
    }
  }

  .complex_scroll {
    height: calc(100% - 100px);
  }
</style>
